<script setup>
import {computed, reactive, toRefs} from "vue";

let person = reactive({
  surname: '张',
  name: '三',
})
let {surname, name} = toRefs(person)


// 修改姓名的方法
function changeSuername(e) {
  console.log(e) // 获取当前输入框对象
  console.log(e.target.value) // 获取当前输入框的value值
  person.surname = e.target.value
}

function changeName(e) {
  person.name = e.target.value
}

let fullName = function () {
  return person.surname + person.name
}

// let fullName = computed(function () {
//   return person.surname + person.name
// })
// 练习需求：
// 1.输入姓，自动获取姓的值
// 2.输入名，自动获取名的值
// 3.将姓和名自动拼接成全名


</script>

<template>
  <div class="container">
    <div>姓：<input type="text" v-bind:value="surname" v-on:input="changeSuername"></div>
    <div>名：<input type="text" :value="name" @input="changeName"></div>
    <div>全名：{{ fullName() }}</div>
    <!--    <div>全名：<input type="text" :value="fullName"></div>-->
  </div>

</template>
